import React from 'react';

import IMG_THREE from '@/assets/imgs/bendishangshangchaung.png';
import IMG_FOUR from '@/assets/imgs/huiyipeizhi.png';
import IMG_TWO from '@/assets/imgs/rechiku.png';
import IMG_ONE from '@/assets/imgs/shizhuanlu.png';

interface SettingsTabProps {
	onTypeChange: (type: number) => void;
}

const TypeList = [
	{
		title: '开启实时转录',
		img: IMG_ONE,
		type: 2
	},
	{
		title: '热词库',
		img: IMG_TWO,
		type: 3
	},
	{
		title: '本地音频/纪要上传',
		img: IMG_THREE,
		type: 4
	},
	{
		title: '会议信息配置',
		img: IMG_FOUR,
		type: 5
	}
];

const SettingsTab: React.FC<SettingsTabProps> = ({ onTypeChange }) => {
	return (
		<div className="flex-col flex-1 px-8 py-6">
			<div className="text-5 font-medium mb-4">会议设置</div>
			<div className="grid grid-cols-2 gap-4 p-4">
				{TypeList.map((item, index) => {
					return (
						<div
							onClick={() => onTypeChange(item.type)}
							key={index}
							className="bg-#EDF6FF rounded-2xl h-40 w-full flex items-center justify-between cursor-pointer px-8"
						>
							<div className="color-[#56585B] text-7.5">{item.title}</div>
							<img alt={item.title} src={item.img} className="h-27.5 w-27.5" />
						</div>
					);
				})}
			</div>
		</div>
	);
};

export default SettingsTab;
